<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      left-arrow
      :right-text="clickright === false?'完成':'编辑'"
      @click-left="$router.back()"
      @click-right="onclickright"
    />
    <div class="cart_car" v-if="falg">
      <div v-for="(item,index) in shoplist" :key="item.id">
        <van-row gutter="0">
          <van-col span="3">
            <van-checkbox v-model="item.shop_ischeck" :name="index" />
          </van-col>
          <van-col span="20">
            <van-card
              :price="item.shop_price"
              :origin-price="item.shop_old_price"
              :title="item.shop_name"
              :thumb="item.shop_image"
            >
              <van-stepper slot="num" v-model="shopCount"></van-stepper>
              <div slot="footer">
                <van-tag plain>小计：￥{{(item.shop_price*shopCount).toFixed(2)}}</van-tag>
              </div>
            </van-card>
          </van-col>
        </van-row>
      </div>
      <van-submit-bar
        :disabled="getsub === 0? true:false"
        :button-text="'删除('+getsub+')'"
        @submit="ondelete"
      >
        <van-checkbox style="width:265px" v-model="check" v-if="shoplist.length<1?'false':'true'">全选</van-checkbox>
      </van-submit-bar>
      <van-submit-bar
        v-if="clickright"
        :price="toprice"
        :disabled="getsub === 0? true:false"
        :button-text="'结算('+getsub+')'"
        @submit="onSubmit"
      >
        <van-checkbox v-model="check" v-if="shoplist.length<1?'false':'true'">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <div class="cart_empty" v-if="fatrue">
      <div class="recommend">
        <img src="//jp.juancdn.com/jpwebapp_v1/images_v1/shopping/empty-cart.png" alt />
        <p>看到喜欢的就带回家吧</p>
        <a href="/">今日推荐</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      falg: true,
      shoplist: [],
      clickright: true,
      fatrue: true,
      shopCount: localStorage.getItem("shopcartstepper")
    };
  },
  computed: {
    //   所有选中商品的价钱
    toprice: function() {
      let Sum = 0;
      this.shoplist.forEach(v => {
        if (v.shop_ischeck) {
          Sum += this.shopCount * v.shop_price;
        }
      });
      return Sum * 100;
    },
    // 选中的结算数量
    getsub: function() {
      let shopid = [];
      this.shoplist.forEach(v => {
        if (v.shop_ischeck === true) {
          shopid.push(v.id);
        }
      });
      var count = shopid.length;
      // console.log(count);
      return count;
    },
    // 全选
    check: {
      get: function() {
        for (let i = 0; i < this.shoplist.length; i++) {
          if (this.shoplist[i] === null) continue;
          if (this.shoplist[i].shop_ischeck === false) {
            return false;
          }
        }
        return true;
      },
      set: function(newValue) {
        this.shoplist.forEach(v => {
          if (v !== null) {
            v.shop_ischeck = newValue;
          }
        });
      }
    }
  },
  created() {
    if (this.goods === "undefined") {
      return (this.falg =!this.falg);
    }else{
      this.fatrue = false
      this.getshopcart();
    }
    // console.log(this.goods);
    
  },
  methods: {
    // 结算
    onSubmit() {
      let ids = [];
      this.shoplist.forEach(v => {
        if (v.shop_ischeck === true) {
          ids.push(v.id);
        }
      });
      // console.log(ids);
      localStorage.setItem("orderid", ids);
      this.$router.push("/orderconfirm");
    },
    // 渲染购物车
    getshopcart() {
      let id = localStorage.getItem("shopcartid");
      let data = []
      data.push(id)
      this.$http.get("/cart_shop", { params: { id: data } }).then(res => {
        // console.log(res);
        if (res.data.code === 201) {
          res.data.data.forEach(v => {
            if (v.shop_ischeck == 0) {
              v.shop_ischeck = false;
            } else {
              v.shop_ischeck = true;
            }
          });
          this.shoplist = res.data.data;
          //   console.log(this.shoplist[0].shop_ischeck);
          if (this.shoplist === undefined) {
            this.falg = false;
          }
        }
      });
    },
    // 删除购物车中的商品
    ondelete() {
      let ids = [];
      this.shoplist.forEach(v => {
        if (v.shop_ischeck === true) {
          ids.push(v.id);
        }
      });
      this.$http
        .delete("/shop_del", { params: { id: ids.join(",") } })
        .then(res => {
          if (res.data.code === 201) {
            this.$toast("已删除");
          }
          this.getshopcart();
        });
    },
    onclickright() {
      this.clickright = !this.clickright;
    }
  }
};
</script>
<style lang="less" >
.cart {
  .recommend {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    clear: both;

    img {
      display: block;
      margin: 0 auto;
      margin-bottom: 12px;
      width: 140px;
    }

    p {
      font-size: 16px;
    }

    a {
      display: inline-block;
      width: 150px;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      color: #ff464e;
      border: 1px solid currentColor;
      text-align: center;
    }
  }
  .van-checkbox__label {
    width: 100%;
    color: #323233;
    line-height: 20px;
    margin: 8px 8px 0px 8px;
  }
  .van-checkbox {
    margin: 55px auto;
  }
  .van-checkbox {
    position: relative;
    top: 5px;
    left: 15px;
    .van-checkbox__icon {
      position: relative;
    }
    .van-checkbox__label {
      margin-bottom: 10px;
    }
  }
}
</style>